<template>
  <div>
    <div class="container">
      <!--    卡片数据-->
      <div v-for="(competitionPrize, index) in competitionPrizes" :key="index">
        <el-card class="box-card" shadow="always">
          <div class="text item">
            <div>
              <span>所在单位或学校:</span>
              <span class="content">
                <el-tag size="small">{{ competitionPrize.unit }}</el-tag>
              </span>
            </div>
            <div>
              <span>专业或岗位:</span>
              <span class="content">
                <el-tag type="success" size="small">{{
                  competitionPrize.position
                }}</el-tag>
              </span>
            </div>
            <div>
              <span>学生姓名:</span>
              <span class="content">
                <el-tag type="success" size="small">{{
                  competitionPrize.stuName
                }}</el-tag>
              </span>
            </div>
            <div>
              <span>年级:</span>
              <span class="content">
                <el-tag type="success" size="small">{{
                  competitionPrize.grade
                }}</el-tag>
              </span>
            </div>
            <div>
              <span>薪资待遇:</span>
              <span class="content">
                <el-tag type="danger" size="small">{{
                  competitionPrize.salary
                }}</el-tag>
              </span>
            </div>
            <div
              v-if="competitionPrize.url != null && competitionPrize.url != ''"
            >
              <span>相关图片:</span>
              <div
                v-for="(url, index2) in competitionPrize.url.split(';')"
                :key="index2"
              >
                <el-image
                  style="width: 100px; height: 100px"
                  :src="url"
                  :preview-src-list="competitionPrize.url.split(';')"
                >
                </el-image>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <div v-if="competitionPrizes.length === 0">
        <el-card class="box-card" shadow="always" style="display:flex;justify-content: center">
          <span style="font-size:32px;font-weight:900">暂无您的数据哦~</span>
        </el-card>
      </div>
    </div>
    <!--    分页-->
    <div style="float:right;margin-top: 10px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[2, 4]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    userName: "",
  },
  name: "AchievementExp",
  data() {
    return {
      // 数据
      competitionPrizes: [],
      // 数据总条数
      total: 0,
      size: 2,
      page: 1,
    };
  },
  methods: {
    /**
     * 数据初始化
     **/
    initData() {
      const url =
        "/achievement?page=" +
        this.page +
        "&size=" +
        this.size +
        "&stuName=" +
        this.userName;
      this.getRequest(url).then((resp) => {
        this.competitionPrizes = resp.data;
        this.total = resp.total;
      });
    },
    /**
     * 一页显示数据量变化触发事件
     */
    handleSizeChange(val) {
      this.size = val;
      this.initData();
    },
    /**
     * 页码发生变化
     */
    handleCurrentChange(val) {
      this.page = val;
      this.initData();
    },
  },
  mounted() {
    this.initData();
  },
};
</script>

<style scoped>
.item {
  padding: 18px 0;
}

.box-card {
  width: 420px;
  border-radius: 15px;
}

.item > div {
  display: flex;
  justify-content: left;
  margin: 12px;
}
.item > span {
  margin-left: 10px;
}
.container {
  margin: 10px;
  font-family: 宋体;
  display: flex;
  justify-content: space-between;
}
.content {
  margin-left: 12px;
}
</style>
